<template>
  <div id="app">
    <!-- 顶部栏开始 -->
    
    <!-- 顶部栏结束 -->
    <!-- 轮播图开始 -->

    <!-- 轮播图结束 -->

    <!-- 脚部栏开始 -->
    <mt-tabbar v-model="selected">
      <mt-tab-item id="index">
        <img slot="icon" src="@/assets/img/tabBarImg/index1.png" />
        首页
        <!-- <router-link to="/">首页</router-link> -->
      </mt-tab-item>
      <mt-tab-item id="fenlei">
        <img slot="icon" src="@/assets/img/tabBarImg/news1.png" />
        分类
        <!-- <router-link to="/fenlei">分类</router-link> -->
      </mt-tab-item>
      <mt-tab-item id="shop">
        <img slot="icon" src="@/assets/img/tabBarImg/cart1.png" />
        购物车
        <!-- <router-link to="/shop">购物车</router-link> -->
      </mt-tab-item>
      <mt-tab-item id="my">
        <img slot="icon" src="@/assets/img/tabBarImg/my1.png" />
        我的
        <!-- <router-link to="/my">我的</router-link> -->
      </mt-tab-item>
    </mt-tabbar>

    <!-- 脚部栏结束 -->
    <router-view />
    <!-- <Index /> -->
    <!-- <My /> -->
  </div>
</template>

<script>
// import Index from '@/views/index';
// import My from '@/views/my';


export default {
  data() {
    return {
      selected:''
    };
  },
  //监听
  watch:{
    selected:function(news,old){
      console.log(news+old);
      console.log(this.selected);
      //push有返回,replace没有返回
      this.$router.push({ path: `/${this.selected}`});
    }
  },
  components:{
    // Index,
    // My
  }
};
</script>

<style scoped>
.mint-tab-item-label>a.router-link-active{
  color: #000;
  display: inline-block;
  /* width: 1.250667rem;
  height: .733333rem; */
}
</style>

